<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <lg-search-bar :schema="schema" @search="search" @reset="reset" />
    </t-card>
    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考lg-form组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>其他事件参考lg-form组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
      <div>其他插槽根据配置（schema）确定</div>
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { IConfigSchema, LgSearchBar } from '@/soar';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';

function search(e) {
  console.log('search', e);
}

function reset(e) {
  console.log('reset', e);
}

const schema: IConfigSchema<any>[] = [
  {
    field: 'a',
    label: '字段a',
    dataType: 'string',
  },
  {
    field: 'b',
    label: '字段b',
    dataType: 'number',
  },
  {
    field: 'c',
    label: '字段c',
    dataType: 'boolean',
  },
  {
    field: 'd',
    label: '字段d',
    dataType: 'datetime',
  },
];

const propsData = [
  { name: 'schema', desc: '结构配置（必填）', type: 'IConfigSchema[] | ISearchSchema[]', def: '' },
  { name: 'gridProps', desc: 'LgGrid 宫格配置属性', type: 'LgGridProps', def: '' },
  { name: 'autoTrim', desc: '自动去两端空格', type: 'boolean', def: 'false' },
];

const emitData = [
  { name: 'search', desc: '点击搜索按钮触发', param: 'object' },
  { name: 'reset', desc: '点击重置按钮触发', param: 'object' },
];

const apiData = [
  { name: 'formRef', desc: 'lg-form引用', type: 'ref', sample: '' },
  { name: 'search', desc: '手动触发搜索', type: 'function', sample: '' },
  { name: 'reset', desc: '手动触发重置', type: 'function', sample: '' },
];

const slotData = [{ name: 'prepend', desc: '表单最前面的位置', scope: '' }];
</script>
